<!-- src\views\Tenant\Pay.vue -->
<template>
  <div class="pay-container">
    <el-card class="pay-card">
      <h2 class="pay-title">租金支付</h2>
      <el-divider />

      <div class="payment-info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单编号">
            {{ orderId }}
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="amount">¥{{ amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <el-radio-group v-model="paymentMethod">
              <el-radio label="alipay">
                <svg
                  class="icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM10 6L14 6L14 10L18 10L18 14L14 14L14 18L10 18L10 14L6 14L6 10L10 10Z"
                  />
                </svg>
                支付宝
              </el-radio>
              <el-radio label="wechat">
                <svg
                  class="icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM10 6L14 6L14 10L18 10L18 14L14 14L14 18L10 18L10 14L6 14L6 10L10 10Z"
                  />
                </svg>
                微信支付
              </el-radio>
            </el-radio-group>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="action-buttons">
        <el-button type="primary" size="large" @click="handlePayment">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM10 6L14 6L14 10L18 10L18 14L14 14L14 18L10 18L10 14L6 14L6 10L10 10Z"
            />
          </svg>
          立即支付
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from "@/api";

const route = useRoute();
const router = useRouter();
const paymentMethod = ref("alipay");

// 获取路由参数
const orderId = ref(route.query.orderId);
const houseId = ref(route.query.houseId);
const amount = ref(route.query.amount);

// 支付处理逻辑
const handlePayment = async () => {
  try {
    api.order.payOrder(orderId.value, houseId.value);
    ElMessage.success("支付成功");
    router.push({
      name: "Order",
    });
  } catch (error) {
    ElMessage.error(`支付失败: ${error.message}`);
  }
};

onMounted(() => {
  if (!orderId.value || !amount.value) {
    ElMessage.error("无效的支付请求");
  }
});
</script>

<style scoped>
.pay-container {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
}

.pay-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

.amount {
  color: #e74c3c;
  font-size: 24px;
  font-weight: bold;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;

  .el-button {
    padding: 20px 50px;
    font-size: 18px;
  }
}

:deep(.el-descriptions__body) {
  background: #f8f9fa;
}

:deep(.el-radio-group) {
  margin-top: 10px;
}

.icon {
  vertical-align: middle;
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
</style>
